<!--template中放html-->
<template>
  <h3>产品页面</h3>
  <el-button @click="check()" type="primary">按钮</el-button>
  <el-button type="success">成功</el-button>
  <el-button type="warning" @click="aa">增加</el-button>
  <table border="1" width="600">
    <tr>
      <td>序号</td>
      <td>产品名称</td>
      <td>单价</td>
      <td>数量</td>
      <td>小计</td>
      <td>操作</td>
    </tr>
    <template v-for="good,i in goodslist">
      <tr>
        <td>{{i}}</td>
        <td>{{good.name}}</td>
        <td>{{good.price}}</td>
        <td>
          <el-button :disabled="good.num<=1" @click="good.num--" type="primary">-</el-button>
          {{good.num}}
          <el-button :disabled="good.num>=10" @click="good.num++" type="primary">+</el-button>
        </td>
        <td>{{good.price*good.num}}</td>
        <td>
          <el-button @click="update(good)">修改</el-button>
          <el-button @click="del(good)">删除</el-button>
        </td>
      </tr>
    </template>
    总计:{{total}}
  </table>
  <form v-show="showAdd">
    <p>产品名称：<input v-model="addForm.name" type="text"/></p>
    <p>产品价格：<input v-model="addForm.price" type="number"/></p>
    <p>数量：<input v-model="addForm.num" type="number"/></p>
    <el-button @click="doAdd">增加</el-button>
  </form>
  <form v-show="showUpdate">
    <p>产品名称：<input v-model="addForm.name" type="text"/></p>
    <p>产品价格：<input v-model="addForm.price" type="number"/></p>
    <p>数量：<input v-model="addForm.num" type="number"/></p>
    <el-button @click="doUpdate">修改</el-button>
  </form>
</template>

<!--script中放脚本-->
<script setup>
/**
 *  ref,reactive 都是vue3新增的响应式API
 *  ref 定义简单数据类型
 *  reactive 定义数组、复杂数据类型
 *  ref定义的变量引用时需要额外 .value 才能访问它的值
 */
import {ref,reactive,computed} from "vue";//两个响应式函数

let showAdd = ref(false);
let goodslist = reactive([//使用reactive包含起来就可以变成响应式
  {id:1,name:'华为笔记本',price:8800,num:1},
  {id:2,name:'小米笔记本',price:6800,num:1},
  {id:3,name:'联想笔记本',price:9800,num:1},
]);
//增加
const aa=()=>{
  showAdd.value = !showAdd.value;
}
let addForm = ref({id:0,name:'',price:'',num:1});
const doAdd=()=>{
  if (goodslist.length>0){
    addForm.value.id = goodslist[goodslist.length-1].id+1;
  }else {
    addForm.value.id = 1;
  }
  goodslist.push(addForm.value);
  addForm.value = {id:0,name:'',price:'',num:1};
  aa();
}
//总计
let total=computed(()=>{
  let money = 0;
  goodslist.forEach(item=>{
    money += item.price*item.num;
  })
  return money;
})
//修改
let showUpdate =ref(false);
const update=(good)=>{
  showUpdate.value=true;
  addForm.value.id=good.id;
  addForm.value.name=good.name;
  addForm.value.num=good.num;
  addForm.value.price=good.price;

}
const doUpdate=()=>{
  goodslist.forEach((item)=>{
    if (item.id==addForm.value.id){
      item.name=addForm.value.name;
      item.num=addForm.value.num;
      item.price=addForm.value.price;
    }
  })
  addForm.value={id:0,name:'',price:8800,num:1}
  showUpdate.value=false;
}
//删除
const del=(good)=>{
  for (let i = 0; i < goodslist.length; i++) {
    if(goodslist[i].id==good.id){
      goodslist.splice(i,1);
    }
  }
}
</script>